<template>
    <el-card>
        <div class="search-bar">
            <el-button type="primary">添加角色</el-button>
        </div>
        <el-table border :data="roles">
            <el-table-column label="明细" width="60px" type="expand">
                <template #default="{ row }">
                    <el-row class="level-box a" v-for="level0 in row.children" :key="level0.id">
                        <el-col :span="4">
                            <el-tag type="" size="medium" closable 
                                @close="deleteRight(row.id,level0.id,row)"
                            >{{ level0.authName }}</el-tag>
                            <i class="el-icon-caret-right"></i>
                        </el-col>
                        <el-col :span="20">
                            <el-row class="level-box b" v-for="level1 in level0.children" :key="level1.id">
                                <el-col :span="4">
                                    <el-tag type="success" size="medium" closable 
                                        @close="deleteRight(row.id,level1.id,row)"
                                    >{{ level1.authName }}</el-tag>
                                    <i class="el-icon-caret-right"></i>
                                </el-col>
                                <el-col :span="20">
                                    <el-tag class="level-tag" type="warning" size="medium" closable 
                                        v-for="level2 in level1.children" :key="level2.id"
                                        @close="deleteRight(row.id,level2.id,row)"
                                    >{{ level2.authName }}</el-tag>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </template>
            </el-table-column>
            <el-table-column label="序号" type="index" width="60px"></el-table-column>
            <el-table-column label="角色名称" prop="roleName"></el-table-column>
            <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
            <el-table-column label="操作" width="300px">
                <template #default="{ row }">
                    <el-button type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button>
                    <el-button type="warning" size="mini" icon="el-icon-setting"
                        @click="openRoleModel(row)"
                    >分配权限</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 权限分配 -->
        <el-dialog title="角色权限更新" :visible.sync="updateRoleRights">
            <el-tree ref="treeRights"
                :data="rights" 
                :props="{ label:'authName',children:'children' }" 
                node-key="id"
                show-checkbox
                default-expand-all
            ></el-tree>
            <template #footer>
                <el-button @click="updateRoleRights = false">取 消</el-button>
                <el-button type="primary" @click="modfilyRoleRights()">确 定</el-button>
            </template>
        </el-dialog>
    </el-card>
</template>

<script>
export default {
    data() {
        return {
            updateRoleRights:false,
            roles:[],
            rights:[],
            currentRoleId:""
        }
    },
    methods:{
        openRoleModel(row){
            this.currentRoleId = row.id;
            let checkRights = [];
            row.children.forEach(right0 => {
                // console.log(right0.id);
                // checkRights.push(right0.id)
                right0.children.forEach(right1 =>{
                    // console.log(right1.id);
                    // checkRights.push(right1.id)
                    right1.children.forEach(right2 =>{
                        // console.log(right2.id);
                        checkRights.push(right2.id)
                    })
                })
            });
            this.updateRoleRights = true;
            this.$nextTick(()=>{
                this.$refs.treeRights.setCheckedKeys(checkRights)
            })
        },
        async findRolesList(){
            let roles = await this.$api.loadRoles();
            this.roles = roles;
        },
        async findRightsList(){
            let rights = await this.$api.loadRights("tree");
            this.rights = rights;
        },
        async deleteRight(roleId,rightId,role){
            // console.log(roleId,rightId);
            let rights = await this.$api.removeRightsByRid(roleId,rightId)
            if(!rights) return;
            role.children = rights;
        },
        async modfilyRoleRights(){
            let halfCheck = this.$refs.treeRights.getHalfCheckedKeys();
            let allCheck = this.$refs.treeRights.getCheckedKeys();
            // console.log(halfCheck,allCheck);
            let rids = halfCheck.concat(allCheck).join(",");
            // console.log(rids);
            await this.$api.updateRoleRights(this.currentRoleId,rids);
            this.updateRoleRights = false;
            this.findRolesList();
        }
    },
    created(){
        this.findRolesList();
        this.findRightsList();
    }
};
</script>

<style lang="less" scoped>
.search-bar {
    margin-bottom: 20px;
    .el-input {
        width: 500px;
        margin-right: 30px;
    }
}
.el-pagination{
    margin-top: 20px;
}
.level-box{
    margin: 0px 30px;
    padding: 10px 0px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: left;
    align-items:center;
    &.a{
        border-top: 1px solid @text-placeholder;
        &:last-child{
            border-bottom: 1px solid @text-placeholder;
        }
    }
    &.b{
        margin: 0px;
        border-bottom: 1px solid @text-placeholder;
        &:last-child{
            border-bottom: none;
        }
    }
    .level-tag{
        margin: 0px 10px 10px 0px;
    }
}
.el-tree::v-deep [role="treeitem"]{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding: 4px 0px;
    margin: 2px 0px;
    border: 1px solid #ccc;
    >*{
        flex-grow: 1;
    }   
}
</style>